<template>
  <div class="grid-wrapper">
    <dorm-block v-for="(item, index) in dormBlockList" :key="index" :info="item"></dorm-block>
  </div>
</template>

<script>
import DormBlock from "../components/dorm-block"
export default {
  name: "dorm-block-grid",

  components: {
    DormBlock
  },

  data() {
    return {
      dormBlockList: [{
        name: '行健轩',
        content: '1304'
      }, {
        name: '志诚轩',
        content: '320'
      }, {
        name: '弘毅轩',
        content: '820'
      }, {
        name: '敏行轩',
        content: '551'
      }, {
        name: '16栋',
        content: '55'
      }, {
        name: '17栋',
        content: '36'
      }]
    }
  }
};
</script>

<style scoped>
  .grid-wrapper {
    box-sizing: border-box;
    display: grid;
    /*grid-gap: 40px 0;*/
    place-items: center;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, 50%);
  }
</style>